<!--
 * @Author: QUAN
 * @Date: 2021-10-29 15:35:46
 * @LastEditTime: 2021-11-08 16:21:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-ketang-pc-mis\src\views\Activity\H5Detail.vue
-->
<template>
  <!-- 选择模板 -->
  <el-dialog
    title="选择模板"
    :visible.sync="dialogVisible"
    width="100%"
    v-if="dialogVisible && !editMode"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    center
  >
    <div class="img-box">
      <img :src="item.img" alt="" @click="selectTemplate(item)" v-for="(item, index) in templateData" :key="index" />
    </div>
  </el-dialog>

  <div class="h5-detail" v-else>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'ActivityH5List' }">
        活动列表
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        {{ editMode ? 'H5页面详情' : '新增H5页面' }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容 -->
    <el-form :model="info" label-width="110px" :rules="h5Rule" label-position="right" ref="h5Form">
      <h3>H5基础信息</h3>
      <div class="card-box">
        <el-form-item prop="bg" label="背景底图">
          <el-row>
            <upload-resource
              is-public
              @upload="(img) => $set(info, 'bg', img.url)"
              :folder="'actImg' + '/' + imgDate"
            ></upload-resource>
          </el-row>
          <el-row v-if="info.bg" class="q-top">
            <img style="max-height: 150px;" :src="info.bg" alt="" />
          </el-row>
          <el-button @click="$set(info, 'bg', '')" class="q-top" type="danger" v-if="info.bg">
            删除图片
          </el-button>
        </el-form-item>
        <el-form-item :prop="'imgList'" label="内容图">
          <el-row class="tips">根据上传图片的顺序，图片从上至下展示</el-row>
          <upload-resource
            is-public
            @upload="uploadImg"
            :folder="'actImg' + '/' + imgDate"
            :multiple="true"
          ></upload-resource>
          <el-row>
            <draggable v-model="info.imgList" handle=".drag-btn" @end="dragEnd">
              <div v-for="(item, index) in info.imgList" :key="index" class="img-oper">
                <img :src="item" alt="" />
                <div class="oper">
                  <i class="el-icon-delete" @click="del(index)"></i>
                  <i class="drag-btn el-icon-rank"></i>
                </div>
              </div>
            </draggable>
          </el-row>
        </el-form-item>
        <el-form-item prop="fristBtnImg" label="交互按钮1图片">
          <el-row>
            <upload-resource
              is-public
              @upload="(img) => $set(info, 'fristBtnImg', img.url)"
              :folder="'actImg' + '/' + imgDate"
            ></upload-resource>
          </el-row>
          <el-row v-if="info.fristBtnImg" class="q-top">
            <img style="max-height: 150px;" :src="info.fristBtnImg" alt="" />
          </el-row>
          <el-button
            @click="$set(info, 'fristBtnImg', '')"
            class="q-top"
            type="danger"
            v-if="info.fristBtnImg"
          >
            删除图片
          </el-button>
        </el-form-item>
        <el-form-item prop="fristBtnText" label="交互按钮1链接">
          <el-input v-model="info.fristBtnText" placeholder="交互按钮1链接地址"></el-input>
        </el-form-item>
        <el-form-item prop="SecondBtnImg" label="交互按钮2图片">
          <el-row>
            <upload-resource
              is-public
              @upload="(img) => $set(info, 'SecondBtnImg', img.url)"
              :folder="'actImg' + '/' + imgDate"
            ></upload-resource>
          </el-row>
          <el-row v-if="info.SecondBtnImg" class="q-top">
            <img style="max-height: 150px;" :src="info.SecondBtnImg" alt="" />
          </el-row>
          <el-button
            @click="$set(info, 'SecondBtnImg', '')"
            class="q-top"
            type="danger"
            v-if="info.SecondBtnImg"
          >
            删除图片
          </el-button>
        </el-form-item>
        <el-form-item prop="SecondBtnText" label="交互按钮2链接">
          <el-input v-model="info.SecondBtnText" placeholder="交互按钮2链接地址"></el-input>
        </el-form-item>
      </div>
      <h3>抽奖配置</h3>
      <div class="card-box">
        <el-form-item prop="compId" label="抽奖组件ID">
          <el-input v-model="info.compId" placeholder="填写H5页使用的抽奖组件ID"></el-input>
        </el-form-item>
      </div>
      <h3>评论配置</h3>
      <div class="card-box">
        <el-form-item prop="comment" label="评论组件">
          <el-radio-group v-model="info.comment">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <h3>活动文案</h3>
      <div class="card-box">
        <el-form-item prop="title" label="活动标题">
          <el-input v-model="info.title" placeholder="用于分享时的主标题"></el-input>
        </el-form-item>
        <el-form-item prop="dec" label="分享描述">
          <el-input v-model="info.dec" placeholder="用于分享时的描述文案"></el-input>
        </el-form-item>
        <el-form-item prop="cover" label="分享封面">
          <el-row>
            <upload-resource
              is-public
              @upload="(img) => $set(info, 'cover', img.url)"
              :folder="'actImg' + '/' + imgDate"
            ></upload-resource>
          </el-row>
          <el-row v-if="info.cover" class="q-top">
            <img style="max-height: 150px;" :src="info.cover" alt="" />
          </el-row>
          <el-button @click="$set(info, 'cover', '')" class="q-top" type="danger" v-if="info.cover">
            删除图片
          </el-button>
        </el-form-item>
      </div>
      <h3>上下线配置</h3>
      <div class="card-box">
        <el-form-item prop="online" label="上下线">
          <el-radio-group v-model="info.online">
            <el-radio :label="1">上线</el-radio>
            <el-radio :label="0">下线</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <p class="button-center">
        <el-button type="primary" @click="save" :loading="saveLoading">保存</el-button>
      </p>
    </el-form>
  </div>
</template>
<script>
  import EditMixins from 'mixins/Edit';
  import { FormRuleConf } from '@/config';
  import UploadResource from 'comp/UploadResource';
  export default {
    mixins: [EditMixins],
    data() {
      return {
        // 验证规则
        ...FormRuleConf.H5,
        // loading
        saveLoading: false,
        // dialog
        dialogVisible: true,
        // 这是所有的模板
        templateData: [
          {
            kind: 0,
            img: 'https://mutong-ketang-img.oss-cn-shanghai.aliyuncs.com/res/template-h5.png',
          },
        ],
      };
    },
    components: {
      UploadResource,
    },
    computed: {
      // 生成时间文件夹
      imgDate: function() {
        return this.dayjs().format('YYYY-MM-DD');
      },
    },
    created() {
      // 这里初始化一下,不然会出问题
      this.info.imgList = [];
    },
    mounted() {},
    methods: {
      // 选择模板
      selectTemplate(item){
        this.info.kind = item.kind
        this.dialogVisible = false
      },

      // 删除图片
      del(delImg) {
        this.info.imgList = this.info.imgList.filter((item, index) => {
          return index !== delImg;
        });
        this.$forceUpdate();
      },

      // 拖动图片
      dragEnd() {
        this.$forceUpdate();
      },

      // 上传图片
      uploadImg(img) {
        if (!this.info.imgList) {
          this.info.imgList = [];
        }
        // 这样写也没用
        // this.$set(this.info.imgList,this.info.imgList.length,img.url)
        this.info.imgList.push(img.url);
        this.$forceUpdate();
      },

      // 得到数据
      getInfo() {
        if (!this.id || this.$route.name != 'ActivityH5Detail' || this.infoGetting) return;
        this.infoGetting = true;
        this.$service
          .SaleH5Detail({ id: this.id })
          .then((res) => {
            this.info = {
              ...res,
              ...res.json,
            };
          })
          .finally(() => {
            this.infoGetting = false;
          });
      },

      // 保存
      save() {
        let _ = {};
        _.json = this.info;
        // 处理数据
        _.online = this.info.online;
        _.kind = this.info.kind;
        _.title = this.info.title;
        _.id = this.info.id;
        if (this.saveLoading) return;
        this.$refs.h5Form.validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            this.$service.SaleH5Save(_, JSON_HEADER).then((res) => {
              this.saveLoading = false;
              this.$message.success('保存成功');
              this.$tabs.open({
                name: 'ActivityH5Detail',
                params: { id: res },
              });
            });
          }
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .h5-detail {
    .button-center {
      text-align: center;
    }

    .img-oper {
      display: inline-block;
      width: 150px;
      height: 150px;
      margin-top: 10px;
      .oper {
        text-align: center;
        font-size: 20px;
        i {
          margin-left: 20px;
        }
      }
    }

    .q-top {
      margin-top: 10px;
    }

    .tips {
      color: #e6a23c;
    }

    h3 {
      color: #409eff;
    }

    .card-box {
      background-color: #eee;
      border: 1px solid #eee;
      padding: 20px;
      margin: 10px 0px;
      border-radius: 6px;
    }
  }

  // el-dialog
  .el-dialog{
    .img-box{
      display: flex;
      img{
        width: 300px;
        height: 600px;
        cursor: pointer;
        margin-right: 20px;
        &:hover{
          border: 1px solid skyblue;
        }
      }
    }
  }
</style>
